<%@include file="/WEB-INF/views/includes/adminHeader.jsp"%>
	<div id="loginDialog" title="EISTech Administration login">
	<c:if test="${not empty errorMessage}">
			<div class="ui-widget" style="margin-bottom:5px">
				<div class="ui-state-error ui-corner-all" style="padding:5px 0 5px 5px;">
					<span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
					<ul id="errorMsg"><li>Username or password is not correct!</li></ul>
				</div>
			</div>
	</c:if>
	<c:if test="${empty errorMessage}">
			<div id="errorMsgContainer" class="ui-widget" style="margin-bottom:5px;display:none">
				<div class="ui-state-error ui-corner-all" style="padding:5px 0 5px 5px;">
					<span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
					<ul id="errorMsg"></ul>
				</div>
			</div>
	</c:if>
	<form:form method="post" action="submitLogin" id="loginform">
		<table>
			<tr>
				<td><form:label path="userName">User Name</form:label></td>
				<td><form:input path="userName" onkeydown="enter()"/></td>
			</tr>
			<tr>
				<td><form:label path="password">Password</form:label></td>
				<td><form:password path="password" onkeydown="enter()"/></td>
			</tr>
		</table>
	</form:form>
    </div>
	<script type="text/javascript">
		function enter() {
			if(window.event.keyCode==13) $('#loginform').submit();
		}
		
		$(function() {
			$('#loginDialog').dialog({
				autoOpen : true,
				width : 320,
				position : [ 'center', 160 ],
				draggable : true,
				resizable : false,
				dialogClass : 'loginDialog',
				buttons : {
					"Login" : function() {
						$("#loginform").submit();
					},
					"clean" : function() {
						$("#userName").val("");
						$("#password").val("");
					}
				}
			});
			
			$('#userName').focusEnd();
			$("#loginform").validate({
				 errorLabelContainer: "#errorMsg",
				 wrapper:"li",
				 onkeyup: false,
				 onclick: false,
				 rules:{
					 userName: "required",
					 password: "required"
				 },
				 messages: {
					 userName: "user name is required!",
					 password: "password is required!"
				 },
				 invalidHandler: function(form, validator) {
					 var errors = validator.numberOfInvalids();
					 if (errors) {
						 var html = "";
						 for (i=0; i<errors; i++) {
							 html += "<li></li>";
						 }
						 $('#errorMsg').html(html);
						 $('#errorMsgContainer').show();
						 $('#loginDialog').dialog("close");
						 $('#loginDialog').dialog("open");
						 $('#errorMsg').html("");
					 }
				 }
			});
		});
	</script>
<%@include file="/WEB-INF/views/includes/adminfooter.jsp"%>